<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <!--禁止微信的缓存页面-->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
  <title>长安整车物流</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
  <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
  <script src="js/base.js"></script>
  <script src="js/api.js"></script>
  <script src="js/wx.js"></script>
</head>

<body class="my p1">

  <div class="weui-panel" id="list">
    <div class="weui-panel__hd">交接单列表</div>
  </div>

  <div class="weui-panel">
    <div class="weui-panel__hd">交接单信息</div>
    <div class="weui-panel__bd text">
      <p>
        <span>交接单号：</span>
        <span id="sendcarOrderNumber"></span>
      </p>
      <p>
        <span> 启票单位：</span>
        <span id="dealerNameSend"></span>
      </p>
      <p>
        <span>数量：</span>
        <span id="carQuantity"></span>
      </p>
      <p>
        <span>收车单位：</span>
        <span id="dealerNameRecive"></span>
      </p>
      <p>
        <span>收车地址：</span>
        <span id="addressRecive"></span>
      </p>
      <p>
        <span>出发地：</span>
        <span id="startAddress"></span>
      </p>
      <p>
        <span>目的地：</span>
        <span id="destination"></span>
      </p>
    </div>
  </div>

  <div class="weui-panel">
      <div class="weui-panel__bd weui-flex text cross-centet">
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1944" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18"><path d="M800.128745 673.15242 547.074972 1004.507504C527.01779 1030.447323 494.27178 1030.547709 474.314985 1004.507504L220.257348 673.15242C159.102017 601.898228 120.493448 506.270243 120.493448 403.635294 120.493448 180.777718 295.727765 0.022155 512.020077 0.022155 728.272235 0.022155 903.506552 180.777718 903.506552 403.635294 903.506552 509.040904 864.295665 601.29591 800.128745 673.15242ZM512.020077 201.376986C403.602878 201.376986 315.784947 291.945502 315.784947 403.635294 315.784947 515.365241 403.602878 605.893602 512.020077 605.893602 620.356967 605.893602 708.215053 515.365241 708.215053 403.635294 708.215053 291.945502 620.356967 201.376986 512.020077 201.376986Z" p-id="1945"></path></svg>
        <span class="weui-flex__item" style="margin: 0 10px" id="addr">定位中...</span>
        <svg onclick="getLocation()" class="icon" style="fill: #FFBE00" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1034" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M512 62C263.4734375 62 62 263.4734375 62 512s201.4734375 450 450 450 450-201.4734375 450-450S760.5265625 62 512 62zM512 859.0625c-178.621875 0-323.4375-144.8015625-323.4375-323.4375 0-173.6296875 136.828125-315.2671875 308.53125-323.0578125l0.16875-42.328125c0.1265625-30.9375 21.4734375-42.496875 47.446875-25.6921875l99.5625 64.40625c25.9734375 16.8046875 25.875 44.1421875-0.2390625 60.75l-100.0546875 63.6328125c-26.1 16.6078125-47.3625 4.8796875-47.2359375-26.071875l0.1546875-38.0671875C356.4125 277.071875 244.8125 393.1578125 244.8125 535.625c0 147.571875 119.64375 267.1875 267.1875 267.1875s267.1875-119.615625 267.1875-267.1875c0-12.8671875-1.2234375-25.4109375-2.98125-37.8 0 0-2.5171875-28.771875 26.0578125-29.0109375 27.6890625-0.225 30.909375 29.0109375 30.909375 29.0109375C834.6078125 510.2421875 835.4375 522.828125 835.4375 535.625 835.4375 714.246875 690.621875 859.0625 512 859.0625z" p-id="1035"></path></svg>
      </div>
  </div>

  <div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" onclick="submit()" href="javascript:">到达</a>
  </div>

  <script>
    var latitude, longitude, list
    initSDK(function() {
      $('#addr').html('获取位置失败')
    })
    getList(function(data) {
      list = data.detail
      appendHtml(list)
      if (list.length) {
        selectItem(list[0].sendcarHeaderId)
      }
    })
    wx.ready(function(){
      getLocation();
    });

    function getLocation() {
        $('#addr').html('定位中...')
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function  (res) {
                latitude = res.latitude
                longitude = res.longitude
                getAddress(
                    {"location": res.latitude+","+res.longitude,"key": QQ_MAP_KEY,"output":"jsonp"},
                    function (data){
                        $('#addr').html(data.result.address)
                    });
            }
        })

    }
    function submit() {
      var sendcarApplyHeaders = getCheckedList()
      params = {
        driverId: window.localStorage.getItem('driverId'),
        dimension: latitude,
        longitude: longitude,
        sendcarApplyHeaders: sendcarApplyHeaders
      }
      if (!params.dimension) {
        weui.alert('未获取到位置')
        return
      }
      if (params.sendcarApplyHeaders.length == 0) {
        weui.alert('未选择数据')
        return
      }
      // console.log(params)
      sendCarApply(params, function () {
        weui.alert('提交成功')
        window.location.reload()
      })
    }
    function selectItem(id) {
      event.preventDefault()
      event.stopPropagation()
      getDetail({sendcarHeaderId: id}, function(data){
        $('#sendcarOrderNumber').text(data.detail.sendcarOrderNumber)
        $('#carQuantity').text(data.detail.carQuantity)
        $('#addressRecive').text(data.detail.addressRecive)
        $('#dealerNameRecive').text(data.detail.dealerNameRecive)
        $('#dealerNameSend').text(data.detail.dealerNameSend)
        $('#destination').text(data.detail.destination)
        $('#startAddress').text(data.detail.startAddress)
      })
    }
  </script>
</body>

</html>